<template>
  <div>
    <div class="right_title">
      <p>水电用量</p>
    </div>
    <div class="right_center">
      <div>
        <img src="../../assets/images/用电量.png" alt="" />
        <div>
          <p>{{ zdian }}</p>
          <p>总用电量（度）</p>
        </div>
      </div>
      <div>
        <img src="../../assets/images/用水量.png" alt="" />
        <div>
          <p>{{ zshui }}</p>
          <p>总用水量（吨）</p>
        </div>
      </div>
    </div>
    <div class="right_item1" id="main1">
      <MyEearts :option="option"></MyEearts>
    </div>
  </div>
</template>

<script setup>
import * as echarts from 'echarts'
import { onMounted, ref } from 'vue'
import { getwater } from '../../request/index'
import MyEearts from '../commont/MyEearts.vue'
const zdian = ref(0)
const zshui = ref(0)
let option = ref({
  legend: {
    textStyle: {
      color: '#fff',
      fontSize: '8px'
    }
  },
  tooltip: {},
  dataset: {
    dimensions: ['product', '安防设备用电', '教学用水', '生态用水', '生活用水'],
    source: [
      { product: '七月', 安防设备用电: 43.3, 教学用水: 85.8, 生态用水: 93.7, 生活用水: 80 },
      { product: '八月', 安防设备用电: 83.1, 教学用水: 73.4, 生态用水: 55.1, 生活用水: 80 }
    ]
  },
  xAxis: { type: 'category' },
  yAxis: {},
  // Declare several bar series, each will be mapped
  // to a column of dataset.source by default.
  series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
})
onMounted(() => {
  getwater().then((res) => {
    console.log(res, '水电用量')
    let names = res.data.data.result[0].series.map((item, index) => {
      return item.name
    })
    let source = res.data.data.result[0].yAxis.data.map((item, index) => {
      let obj = {}
      names.forEach((v, i) => {
        obj[v] = res.data.data.result[0].series[i].data[index]
      })
      return {
        product: item,
        ...obj
      }
    })
    option.value.dataset.source = source
    // 总用电量和用水量
    source.forEach((item) => {
      for (let key in item) {
        if (key === '安防设备用电') {
          zdian.value += item[key]
        } else {
          if (key != 'product') {
            zshui.value += item[key]
          }
        }
      }
    })
  })
})
</script>

<style scoped lang='scss'>
.right_title {
  height: 40px;
  width: 100%;
  color: #fff;
  padding-left: 10px;
  line-height: 40px;
  background: url('../../assets/images/titlebg.png') no-repeat;
  background-size: 100% 100%;
  transform: rotateY(180deg);
}
.right_title p {
  transform: rotateY(180deg);
  padding-left: 23px;
}
.right_center {
  color: #fff;
  height: 80px;
  margin-top: 15px;
  display: flex;
}
.right_center > div:nth-child(1) {
  margin-right: 20px;
}
.right_center > div {
  width: 50%;
  height: 100%;
  background: #0c1d5f;
  border: 1px solid blue;
  display: flex;
  align-items: center;
  justify-content: space-around;
}
#main1 {
  margin-top: 15px;
  width: 100%;
  height: 320px;
  background: #0c1d5f;
}
</style>